﻿import QtQuick 2.15
import QtQuick.Controls 2.15

import ZHSingletonControl   1.0

import XUI 1.0
/* 只有图像的按键
   背景色可调, 图片按下可替换
   Rectangle + Image +  MouseArea
*/
Rectangle {
    id: root

    property string     source: "qrc:/image/sampleImg.png"
    property string     checkedSource: ""
    property string     pressedSource: ""
    property real       padding: 0
    property bool       checked: false
    property color      backgroundColor: "transparent"
    property color      backgroundPressedColor: "transparent"
    property alias      imageRotation : image.rotation

    signal clicked

    color:          mouseArea.pressed ? backgroundPressedColor : backgroundColor
    implicitHeight: XScreenTool.base * 5
    implicitWidth: XScreenTool.base * 5

    Image {
        id:     image
        width: parent.width - padding
        height: parent.height - padding
        anchors.centerIn: parent
        source: mouseArea.pressed && pressedSource != "" ? pressedSource : checked && checkedSource != "" ? checkedSource : root.source

    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }

}

////import QtQuick 2.3
////import QtQuick.Controls 2.2//2.5
//////import QtQuick.Controls.Styles 1.4
////import QtGraphicalEffects 1.0

////// TODO: Use QT styles. Use default button style + custom style entries
////import QGroundControl.ScreenTools 1.0
////import QGroundControl.Palette 1.0
//import QGroundControl.Controls              1.0
////import QGroundControl   1.0

//import QtQuick              2.3
//import QtQuick.Controls     2.2
//import QtGraphicalEffects   1.0

//import QGroundControl.ScreenTools   1.0
//import QGroundControl.Palette       1.0

//Button {
//    id:     button
////    radius: height/2

//    property var  imageExteaSource
//    property bool imageExteaSourceEnabled:  false
//    property real  imageScale:      1.5
//    property real  borderWidth:     0
////    property alias radius:          buttonBkRect.radius
////    property alias bgColor:         buttonBkRect.color
//    property real  _imageHeightScal:   0.8

//    property color _themeC:                 qgcPal.ccLight   //默认颜色，可外部传入
//    //矩形背景颜色
//    property color _backgroundColor
//    //图标颜色
//    property color _imageColor:             "white"
//    //外圈颜色
//    property color _borderColor:            "white"
//    property color _textColor:              "white"         //文本颜色

//    property bool colorVisible:             true

//    property alias      imageSource:            image.source


//    property bool picked: false
//    property bool oldPicked: false

//    onPickedChanged: {
//        if(picked) {
//            _imageColor =       "black";
//            _borderColor =      "black";
//            _backgroundColor =  qgcPal.ccFaint
//        }
//        else {
//            _imageColor =       qgcPal.ccLight;
//            _borderColor =      'WHITE'//qgcPal.ccLight;
//            _backgroundColor =  "#000000"//"black"
//        }
//    }

//    Component.onCompleted: {
//        _imageColor =      qgcPal.ccLight;
//        _borderColor =      "WHITE"//qgcPal.ccLight;
//        _backgroundColor =  "000000"
//    }

////    signal dropped(int idx)

//    QGCPalette { id: qgcPalDisabled;   colorGroupEnabled: false }

//    contentItem: Item {
//        //宽高由外部的决定
//        id:                         contentLayoutItem
//        QGCColoredImage {
//            id:                         image
//            anchors.centerIn:           parent
//            height:                     parent.height * _imageHeightScal
//            width:                      height
//            color:                      _imageColor
////            coVisible:                  button.colorVisible
////            source:                     imageExteaSourceEnabled ? imageExteaSource : imageSource
//        }
//    }

//    background: Rectangle {
//        id:                 buttonBkRect
//        color:              _backgroundColor
//        anchors.fill:       parent
////        border.color:       _borderColor
////        border.width:       2
//        opacity:            0.4//0.6//0.4//0.8//0.5//0.8
//        radius:             height/2
//    }

////    state:                                  "Default"
////    states: [
////        State {
////            name: "Default"
////            PropertyChanges {
////                target: button;
////                _backgroundColor:           /*enabled ?*/  (pressed ?  "black" : "white")  /*: ("#9d9d9d")*/     //   "white"///*(checked || pressed)*/picked ? qgcPal.ccFaint :   Qt.rgba(0,0,0,0)
////                _imageColor:                enabled ?  (pressed ?  "white" : "black")  : ("#9d9d9d")     ///*(checked || pressed)*/picked ? "black" :              "white"
//////                _circleC:                   pressed ?  _subC :  _themeC
////            }
////        }
////    ]

////    Canvas {
////        id:             buttonBkRect
////        anchors.fill:   parent

////        onPaint: {
////            var ctx = getContext("2d");  //画师
////            ctx.strokeStyle =            "4c000000"//_borderColor
////            ctx.lineWidth =             3
////            ctx.fillStyle =             "4c000000"//_backgroundColor
////            ctx.beginPath();
////            //移动画笔到100,100位置
////            ctx.moveTo(width/2,height/2);
////            //原点在100,100，半径为100 ——> 起始度数为180  结束度数270
////            ctx.arc(width/2, height/2, height/2, 0*Math.PI/180, 360 * Math.PI/180);
//////            ctx.closePath();
////            ctx.fill()
////            ctx.stroke();    //外框勾勒
////        }
////    }

//    // Change the colors based on button states
//    /*
//                默认    悬浮     按下
//     背景     |  黑     小麦色    白
//     图标     | 主题     黑      黑
//     外圈     | 主题     黑      黑
//    */

////    // Process hover events
////    MouseArea {
////        enabled:            !ScreenTools.isMobile
////        propagateComposedEvents: true
////        hoverEnabled:       true
////        preventStealing:    true
////        anchors.fill:       button
////        // Propagate events down
////        onClicked:          {
////            _toolStripAction.triggered(this)
////            mouse.accepted = false;
////        }
////        onDoubleClicked:    { mouse.accepted = false; }
////        onPositionChanged:  { mouse.accepted = false; }
////        onPressAndHold:     { mouse.accepted = false; }
////        onPressed:          { mouse.accepted = false  }
////        onReleased:         { mouse.accepted = false }

////        //按键想穿透必须 onClicked、onPressed、onReleased 加上  mouse.accepted = false
////    }
//}
